{extend name="./theme/backend/base.html"}
{block name="content"}
<style type="text/css">
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{vertical-align: top;}

.settlement-data .item{margin-bottom: 16px;}
.settlement-data .item .widget{padding: 15px 20px; border-radius: 5px;color: #FFF; background-color: #0092DC;}
.settlement-data .item .widget .row{padding-top: 16px;}
.settlement-data .row .item:nth-child(1) .widget{background-color:#ed5565;}
.settlement-data .row .item:nth-child(4) .widget{background-color: #f8ac59;}
.select-label{display: inline-block;}
.select-label a{display: inline-block;padding: 5px 10px; color: #666; text-decoration: none;}
.select-label a.active{background-color: #0092DC; border-radius: 5px; color: #FFF;}
</style>
 <script type="text/javascript" src="{$static_path}/js/echarts.min.js"></script>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('mall/Settlement/index')}">数据报表</a></li>
    </ul>
    <form class="well form-search" method="post" action="{:url('mall/Settlement/index')}">
        时间筛选：
        <div class="select-label">
            <a href="{:url('mall/Settlement/index')}" {notpresent name="search.type"}{notpresent name="search.end_time"}class="active"{/notpresent}{/notpresent}>全部</a>
            <a href="{:url('mall/Settlement/index',['type'=>'today'])}" {present name="search.type"}{eq name="search.type" value="today"}class="active"{/eq}{/present}>今天</a>
            <a href="{:url('mall/Settlement/index',['type'=>'week'])}" {present name="search.type"}{eq name="search.type" value="week"}class="active"{/eq}{/present}>本周</a>
            <a href="{:url('mall/Settlement/index',['type'=>'month'])}" {present name="search.type"}{eq name="search.type" value="month"}class="active"{/eq}{/present}>本月</a>
            <a href="{:url('mall/Settlement/index',['type'=>'quarter'])}" {present name="search.type"}{eq name="search.type" value="quarter"}class="active"{/eq}{/present}>本季度</a>
            <a href="{:url('mall/Settlement/index',['type'=>'year'])}" {present name="search.type"}{eq name="search.type" value="year"}class="active"{/eq}{/present}>本年</a>
        </div>&nbsp; &nbsp;&nbsp; &nbsp;
		时间段：
		<input type="text" name="start_time" class="js-datetime date" value="{$search.start_time|default=''}" style="width: 120px;" autocomplete="off">-
		<input type="text" class="js-datetime date" name="end_time" value="{$search.end_time|default=''}" style="width: 120px;" autocomplete="off"> &nbsp; &nbsp;
		<input type="submit" class="btn btn-primary" value="搜索">
	</form>

    
    <div class="container-fluid settlement-data">
        <!-- 数据统计 -->
        <div class="row">
            <div class="col-sm-3 col-xs-12 item">
                <div class="widget">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-line-chart fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 总营业额(完成) </span>
                            <h2 class="font-bold">￥{$total.total_amount|default=0}</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 item">
                <div class="widget">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-area-chart fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 总订单数(成功) </span>
                            <h2 class="font-bold">{$total.order_success_number|default=0}单</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 item">
                <div class="widget">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-bar-chart fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 总退款订单</span>
                            <h2 class="font-bold">{$total.order_refund_number|default=0}单</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 item">
                <div class="widget">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-pie-chart fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 消费增长（同比上月）</span>
                            <h2 class="font-bold">￥{$increase.month_total_amount-$increase.last_month_total_amount}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据图表 -->
        <div class="row settlement-chart">
            <div class="col-sm-8 col-xs-8">
                <div id="sale-chart" style="height: 390px;"></div>
            </div>
            <div class="col-sm-4 col-xs-4">
                <div id="payment-chart" style="width: 100%;height:400px;"></div>
            </div>
        </div>
    </div>

    
    <form method="post" class="js-ajax-form" action="term/listorders">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th width="50">编号</th>
                    <th>销售日期</th>
                    <th>销售订单数</th>
                    <th>销售总额</th>
                    <th>退款订单数</th>
                    <th>退款总额</th>
                    <th width="140">操作</th>
                </tr>
            </thead>
            <tbody>
                {empty name="list"}
                <tr><td colspan="7">没有数据</td></tr>
                {else/}
                {foreach name="list" item="vo"}
                <tr>
                    <td>{$key+1}</td>
                    <td>{$vo.date}</td>
                    <td>{$vo.order_number}</td>
                    <td>{$vo.money}</td>
                    <td>
                    	{$vo.refund_order_number}
                    </td>
                    <td>
                        {$vo.refund_total}
                    </td>
                    
                    <td>
                        {eq name="key" value="0"}
                    	<a href="{:url('mall/Order/index',['start_time'=>$vo.date])}">查看订单列表</a>
                        {else/}
                        <a href="{:url('mall/Order/index',['start_time'=>$vo.date,'end_time'=>$list[$key-1]['date']])}">查看订单列表</a>
                        {/eq}
                    </td>
                </tr>
                {/foreach}
                {/empty}
            </tbody>
        </table>
    </form>
</div>
<script src="{$admin_assets_path}/js/common.js"></script>
<script type="text/javascript">
// 绘制图表。
(function(){
    let date_arr=[],order_total=[],order_number=[],refund_total=[];
    {volist name="list" id="vo"}
    date_arr.push('{$vo.date}');
    order_total.push({$vo.money});
    order_number.push({$vo.order_number});
    refund_total.push({$vo.refund_total});
    {/volist}
    date_arr.reverse();
    order_total.reverse();
    order_number.reverse();
    refund_total.reverse();
    var option = {
        title: {
            show: true,     // 是否显示
            text: '交易统计',// 主标题文本
            subtext:"",     // 副标题文本，'\n'指定换行
            x:"left",
            y:"top",
            textAlign:"left",       // 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            backgroundColor:"#F00", // 标题背景颜色，默认透明
            borderColor:"#F00",     // 标题边框颜色
            borderWidth:0,          // 标题边框线宽，单位px，默认为0（无边框）
            padding: [0,0,0,0],     // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
            itemGap:10,             // 主副标题纵向间隔，单位px，默认为10
            // 主标题文本样式
            textStyle: {
                // 颜色
                color: '#333',
                // 水平对齐方式，可选为：'left' | 'right' | 'center'
                align: 'left',
                // 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
                baseline: 'bottom',
                // 字体系列
                fontFamily: '',
                // 字号 ，单位px
                fontSize:18,
                // 样式，可选为：'normal' | 'italic' | 'oblique'
                fontStyle: 'normal',
                // 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
                fontWeight: 'bold'
            },
            // 副标题文本样式
            subtextStyle: {
                // 颜色
                color: '#FF7F50',
                // 水平对齐方式，可选为：'left' | 'right' | 'center'
                align: 'left',
                // 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
                baseline: 'bottom',
                // 字体系列
                fontFamily: 'Arial, 宋体, sans-serif',
                // 字号 ，单位px
                fontSize: 15,
                // 样式，可选为：'normal' | 'italic' | 'oblique'
                fontStyle: 'italic',
                // 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
                fontWeight: 'normal'
            }
        },
        tooltip: {
            show: true,
            showContent:true,   // tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
            trigger: 'axis',    // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
            showDelay: 0,       // 显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
            hideDelay: 0,       // 隐藏延迟，单位ms
            transitionDuration: 0,  // 动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。
            enterable: false,       // 鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true
            backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
            borderColor: '#FF7F50',     // 提示边框颜色
            borderRadius: 0,   // 提示边框线宽，单位px，默认为0（无边框）
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},
            data: date_arr           
        },
        yAxis: {
            splitLine: {
                show: true
            },
            type: 'value'
        },
        legend: {
            orient: 'horizontal',                       // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical'
            x:"left",
            left: 'center',
            top: 25,
            data: ['交易金额','订单数','退款金额'],    // 图例内容数组
        },
        toolbox: {
            show:true,
            left: 'right',
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        /*dataZoom: [{
           startValue: '//'
        }, {
           type: 'inside'
        }],*/
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 50,
                color: '#096'
            }, {
                gt: 50,
                lte: 100,
                color: '#ffde33'
            }, {
                gt: 100,
                lte: 150,
                color: '#ff9933'
            }, {
                gt: 150,
                lte: 200,
                color: '#cc0033'
            }, {
                gt: 200,
                lte: 300,
                color: '#660099'
            }, {
                gt: 300,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },

        // type 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为： 
        // 'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图） 
        // 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）

        series: [
            {"name":"交易金额","type":"line","data":order_total},
            {"name":"订单数","type":"line","data":order_number},
            {"name":"退款金额","type":"line","data":refund_total}
        ]        
    };
    var myChart = echarts.init(document.getElementById('sale-chart'),'light');
    myChart.setOption(option);
})();


// 数据统计
(function(){
    var option = {
        title: {
            text: '支付统计'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            left: 'left',
            top: 25,
            data: ["微信PC支付","微信H5支付",,"微信公从号支付","微信小程序支付","支付宝PC支付","支付宝H5支付","支付宝APP支付","余额支付"],
            selected:{"微信支付":true,"支付宝支付":true,"余额支付":true}            
        },
        series : [
            {
                name: '支付统计',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {"value":{$total.wechat_pc_amount|default=0},"name":"微信PC支付"},
                    {"value":{$total.wechat_h5_amount|default=0},"name":"微信H5支付"},
                    {"value":{$total.wechat_mp_amount|default=0},"name":"微信公从号支付"},
                    {"value":{$total.wechat_wxapp_amount|default=0},"name":"微信小程序支付"},
                    {"value":{$total.alipay_pc_amount|default=0},"name":"支付宝PC支付"},
                    {"value":{$total.alipay_wap_amount|default=0},"name":"支付宝H5支付"},
                    {"value":{$total.alipay_app_amount|default=0},"name":"支付宝APP支付"},
                    {"value":{$total.balance_amount|default=0},"name":"余额支付"}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('payment-chart'),'light');
    myChart.setOption(option);
})();
</script>
{/block}